<template>

	<div style="height: 500px;" align="right">
		<div style="width: 99%;height: 500px;">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="全部订单" name="first"></el-tab-pane>
				<el-tab-pane label="已支付" name="second"></el-tab-pane>
				<el-tab-pane label="待支付" name="third"></el-tab-pane>
				<el-tab-pane label="已取消" name="fourth"></el-tab-pane>
				<el-tab-pane label="已退款" name="request"></el-tab-pane>
			</el-tabs>

			<el-empty :image-size="150" description="暂时没有相关订单" v-if="orders.length<=0 || temporaryOrders<=0"></el-empty>
			<div v-for="item in temporaryOrders" v-if="item.payment===control || control===-1"
				style="text-align: left;padding-top: 10px;border: 1px solid rgb(0, 0, 0, 0.1);border-radius: 5px;padding-bottom: 10px;margin-bottom: 10px;">
				<div style="margin-left: 10px;">
					<el-row>
						<el-col :span="12" align="left">
							<span style="margin-right: 10px;font-weight: 900;">{{item.departure}}</span>
							<span style="font-size: 20px;font-family: 900;margin-right: 10px;">-</span>
							<span style="font-weight: 900;margin-right: 10px;">{{item.destination}}</span>
							<span
								style="font-size: 13px;color: rgb(0, 0, 0, 0.5);margin-right: 5px;font-weight: 900;">订单id:</span>
							<span
								style="font-size: 13px;color: rgb(0, 0, 0, 0.5);font-weight: 900;">{{item.order_id}}</span>
						</el-col>
						<el-col :span="12" align="right">
							<span style="margin-right: 10px;color: #ffaa00;">￥{{item.price}}</span>
						</el-col>
					</el-row>
					<div style="margin-top: 5px;font-size: 13px;color: rgb(0, 0, 0, 0.5);">
						<el-row>
							<el-col :span="12">
								<span>下单时间:</span>
								<span style="margin-left: 5px;">{{item.generation_time}}</span>
								<span style="margin-left: 10px;">订单状态:</span>
								<span v-if="item.payment===2" style="margin-left: 5px;">已完成</span>
								<span v-else-if="item.payment===3" style="margin-left: 5px;">已退款</span>
								<span v-else-if="item.payment===1" style="margin-left: 5px;">已取消</span>
								<span v-else-if="item.payment===0" style="margin-left: 5px;">待支付</span>
							</el-col>
							<el-col :span="12" align="right" v-if="item.payment===0">
								<span style="margin-right: 10px;" @click="detail(item.order_id)">去支付</span>
							</el-col>
							<el-col :span="12" align="right" v-if="item.payment===1 || item.payment===3 || item.payment===2">
								<span style="margin-right: 10px;" @click="detail(item.order_id)">查看详细信息</span>
							</el-col>
						</el-row>
					</div>
					<div>

					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import axios from 'axios';

	export default {
		created() {

			if (sessionStorage.getItem("eleToken") == null) {
				this.$alert("登录失效，请重新登录", '提示', {
					confirmButtonText: '确定',
					type: 'error',
					callback: action => {
						sessionStorage.removeItem("mailbox");
						sessionStorage.removeItem("sessionId");
						location.href = "/";
					}
				});
				return;
			}

			axios.post("api/OrderAction/personalOrders")
				.then((res) => {
					if (res.data.code === 200) {
						if (res.data.data !== undefined) {
							this.orders = res.data.data;
							for (var i = 0; i < this.orders.length; i++) {
								var time = this.orders[i].generation_time;
								this.orders[i].generation_time = time.replace("T", " ");
							}
							this.temporaryOrders = JSON.parse(JSON.stringify(this.orders));
						} else {
							this.orders = [];
						}
					} else {
						if (res.data.code === 401 || res.data.code === 403) {
							this.$alert(res.data.msg, '提示', {
								confirmButtonText: '确定',
								type: 'error',
								callback: action => {
									sessionStorage.removeItem("eleToken");
									sessionStorage.removeItem("mailbox");
									sessionStorage.removeItem("sessionId");
									location.href = "/";
								}
							});
						} else {
							this.$message({
								dangerouslyUseHTMLString: true,
								message: '<strong>' + res.data.msg + '</strong>',
								type: 'error'
							});
						}
					}
				})
		},
		data() {
			return {
				activeName: 'first',
				orders: [],
				control: -1,
				temporaryOrders: []
			}
		},
		methods: {
			compareTime(data) {
				var date = new Date(data);
				var dateTwo = new Date();
				return date > dateTwo;
			},
			handleClick(tab, event) {
				switch (tab.index) {
					case "0":
						this.control = -1;
						this.temporaryOrders = JSON.parse(JSON.stringify(this.orders));
						break;
					case "1":
						this.control = 2;
						this.iteration(2);
						break;
					case "2":
						this.control = 0;
						this.iteration(0);
						break;
					case "3":
						this.control = 1;
						this.iteration(1);
						break;
					case "4":
						this.control = 3;
						this.iteration(3);
						break;
				}
			},
			iteration(index) {
				var orders = this.orders;
				var temporaryOrders = new Set();
				for (var i = 0; i < orders.length; i++) {
					if (orders[i].payment === index) {
						temporaryOrders.add(orders[i]);
					}
				}
				this.temporaryOrders = [...temporaryOrders]
			},
			detail(orderId) {
				sessionStorage.setItem("orderId", orderId);
				location.href = "/ticketInformation"
			}
		}
	}
</script>

<style>
</style>